<template>
  <div class="CustomVantSelect">
    <div class="selectInp">
      <div v-if="hasLabel" class="inpLabel">{{ label }}：</div>
      <div
        class="inpInner"
        :style="{
          width: width,
          color: vantSelectText ? '#323233' : '#C8C9CC'
        }"
        @click="vantSelectShow = true"
      >
        <span>{{ vantSelectText || pickerTitle }}</span>
        <i class="el-icon-caret-bottom" />
      </div>
    </div>
    <van-popup v-model="vantSelectShow" position="bottom" get-container="body">
      <van-picker
        :title="pickerTitle"
        show-toolbar
        :default-index="vantSelectIndex"
        :columns="colums"
        @cancel="vantSelectShow = false"
        @confirm="onConfirm"
      />
      <div class="px-3 py-2 border-top">
        <van-button type="danger" class="w-100" @click="onClear">清空</van-button>
      </div>
    </van-popup>
  </div>
</template>

<script>
export default {
  props: {
    width: {
      type: String,
      default: '100%'
    },
    pickerTitle: {
      type: String,
      default: '请选择城市'
    },
    colums: {
      type: Array,
      default: () => [{
        value: -1,
        text: '德阳市'
      },
      {
        value: 510603,
        text: '旌阳区'
      },
      {
        value: 510623,
        text: '中江县'
      },
      {
        value: 510626,
        text: '罗江区'
      },
      {
        value: 510681,
        text: '广汉市'
      },
      {
        value: 510682,
        text: '什邡市'
      },
      {
        value: 510683,
        text: '绵竹市'
      }]
    },
    valueKey: {
      type: String,
      default: 'value'
    },
    label: {
      type: String,
      default: '选择城市'
    },
    selectValue: {
      type: [String, Number],
      default: ''
    },
    hasLabel: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      vantSelectShow: false,
      vantSelectIndex: 0,
      vantSelectText: ''
    }
  },
  watch: {
    selectValue() {
      this.initPicker()
    }
  },
  mounted() {
    this.initPicker()
  },
  methods: {
    initPicker() {
      this.vantSelectIndex = this.colums.findIndex(v => {
        return v[this.valueKey] === this.selectValue
      })
      if (this.valueKey === 'text') {
        this.vantSelectText = this.selectValue
      } else {
        this.vantSelectText = this.colums.find(v => {
          return v[this.valueKey] === this.selectValue
        })?.text
      }
    },
    onConfirm(value) {
      this.vantSelectShow = false
      this.vantSelectIndex = this.colums.findIndex(v => {
        return v[this.valueKey] === value[this.valueKey]
      })
      this.vantSelectText = value.text
      this.$emit('update:selectValue', value[this.valueKey])
      this.$emit('confirm', value)
    },
    onClear() {
      this.vantSelectShow = false
      this.vantSelectIndex = 0
      this.vantSelectText = ''
      this.$emit('update:selectValue', '')
      this.$emit('confirm', '')
    }
  }
}
</script>

<style lang="scss">
.CustomVantSelect {
  width: auto;
  //height: 32px;

  .selectInp {
    display: flex;
    align-items: center;
    background-color: white;
    //height: 32px;

    .inpLabel {
      background-color: white;
      font-size: 14px;
    }

    .inpInner {
      border: 1px solid #e9e9e9;
      //height: 32px;
      background-color: white;
      border-radius: 3px;
      font-size: 28px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 4px 28px;
      cursor: pointer;
      color: #323233;

      .el-icon-caret-bottom {
        color: #838282;
      }
    }
  }
}
</style>
